<template>
    <jb-crud-page
        ref="itemPage"
        title-icon="majesticons:data-line"
        title-text="系统参数配置管理"
        search-url="/api/admin/globalConfig/datas"
        :search-conditions="itemPageConditions"
        :pager="false"
        :edit-component="ItemEdit"
    >
        <template #conditions-form>
            <n-input
                v-model:value="itemPageConditions.keywords"
                class="w-130px"
                type="text"
                placeholder="关键词查询"
            />
            <jb-select
                v-model:value="itemPageConditions.builtIn"
                url="/api/admin/dictionary/options?typeKey=options_boolean"
                class="w-130px"
                placeholder="=是否内置="
                filterable
            ></jb-select>
        </template>
        <template #opt>
            <jb-btn
                :icon="Icons.REFRESH"
                type="primary"
                ghost
                confirm-text="确认刷新缓存？"
                url="/api/admin/globalConfig/clearCache"
                @success="itemPage?.loadData()"
                >刷新缓存</jb-btn
            >
        </template>
        <template #default="{ list }">
            <splitpanes class="default-theme">
                <pane size="30">
                    <jb-crud-page
                        ref="typePage"
                        title-text="系统参数类型管理"
                        search-url="/api/admin/globalConfigType/datas"
                        :pager="false"
                        :bordered="true"
                        :search-btn-shown="false"
                        :reset-btn-shown="false"
                        :edit-component="TypeEdit"
                    >
                        <template #opt>
                            <jb-btn
                                tip-text="刷新"
                                :icon="Icons.REFRESH"
                                type="warning"
                                quaternary
                                circle
                                @click="typePage?.loadData()"
                            ></jb-btn>
                            <jb-btn
                                tip-text="新增系统参数类型"
                                :icon="Icons.ADD"
                                quaternary
                                circle
                                type="primary"
                                @click="typePage?.showEditModal('新增系统参数类型')"
                            ></jb-btn>
                            <jb-btn
                                tip-text="初始化顺序"
                                confirm-text="确定初始化顺序？"
                                :icon="Icons.SORT"
                                quaternary
                                type="info"
                                circle
                                url="/api/admin/globalConfigType/initRank"
                                @success="typePage?.loadData()"
                            ></jb-btn>
                        </template>
                        <template #default="{ list }">
                            <jb-table
                                :row-config="{ isCurrent: true }"
                                :data="list"
                                @cell-click="cellClickEvent"
                            >
                                <jb-column field="name" title="名称" min-width="280">
                                    <template #default="{ row }">
                                        <span>{{ row?.name }} </span>
                                        <n-gradient-text type="info"
                                            >[{{ row?.typeKey }}]</n-gradient-text
                                        >
                                        <n-tag
                                            v-if="row.builtIn"
                                            class="ml-4px"
                                            size="small"
                                            type="primary"
                                            >内置</n-tag
                                        >
                                    </template>
                                </jb-column>
                                <jb-column title="操作" width="140" fixed="right">
                                    <template #default="{ row }">
                                        <jb-btn
                                            tip-text="新增参数"
                                            :icon="Icons.ADD"
                                            type="primary"
                                            size="small"
                                            secondary
                                            circle
                                            @click="
                                                itemPage?.showEditModal(
                                                    '新增系统参数类型',
                                                    {
                                                        typeId: row.id
                                                    }
                                                )
                                            "
                                        ></jb-btn>
                                        <jb-btn
                                            v-if="!row.builtIn"
                                            tip-text="编辑"
                                            :icon="Icons.EDIT"
                                            type="warning"
                                            secondary
                                            circle
                                            class="mx-8px"
                                            @click="
                                                typePage?.showEditModal(
                                                    '编辑系统参数类型',
                                                    { id: row.id }
                                                )
                                            "
                                        ></jb-btn>
                                        <jb-btn
                                            v-if="!row.builtIn"
                                            tip-text="删除"
                                            :icon="Icons.DELETE"
                                            type="error"
                                            secondary
                                            circle
                                            confirm-text="确定删除这条数据？"
                                            :url="`/api/admin/globalConfigType/delete/${row.id}`"
                                            @success="typePage?.loadData()"
                                        ></jb-btn>
                                    </template>
                                </jb-column>
                            </jb-table>
                        </template>
                    </jb-crud-page>
                </pane>
                <pane size="70">
                    <vxe-table
                        align="center"
                        border
                        show-header-overflow
                        show-overflow
                        :row-config="{ isHover: true }"
                        :column-config="{ resizable: true }"
                        height="auto"
                        :data="list"
                    >
                        <jb-column
                            type="seq"
                            title="序号"
                            width="60"
                            fixed="left"
                        ></jb-column>
                        <jb-column
                            field="name"
                            title="参数名"
                            min-width="300"
                            fixed="left"
                        ></jb-column>
                        <jb-column
                            field="configKey"
                            title="参数KEY"
                            min-width="360"
                        ></jb-column>
                        <jb-column field="configValue" title="参数值" min-width="240">
                            <template #default="{ row }">
                                <n-text v-if="row.valueType != 'boolean'">{{
                                    row?.configValue
                                }}</n-text>
                                <template v-else>
                                    <n-text
                                        :type="
                                            row?.configValue == 'true' ||
                                            row?.configValue === true
                                                ? 'success'
                                                : 'error'
                                        "
                                        >{{ row?.configValue }}</n-text
                                    >
                                    <jb-switch
                                        v-model:value="row.configValue"
                                        class="ml-4px"
                                        confirm="确定切换此状态？"
                                        field-name="configValue"
                                        :url="`/api/admin/globalConfig/toggleBooleanValue/${row.id}`"
                                    ></jb-switch>
                                </template>
                            </template>
                        </jb-column>
                        <jb-column
                            field="typeKey"
                            title="所属类型"
                            min-width="200"
                        ></jb-column>
                        <jb-column
                            field="valueType"
                            title="值类型"
                            min-width="160"
                        ></jb-column>

                        <jb-column field="builtIn" title="内置" width="60">
                            <template #default="{ row }">
                                <n-tag :type="row.builtIn ? 'success' : 'default'">{{
                                    row?.builtIn ? '是' : '否'
                                }}</n-tag>
                            </template>
                        </jb-column>
                        <jb-column
                            field="updateTime"
                            title="更新时间"
                            min-width="200"
                        ></jb-column>
                        <jb-column title="操作" width="110" fixed="right">
                            <template #default="{ row }">
                                <jb-btn
                                    tip-text="编辑"
                                    :icon="Icons.EDIT"
                                    secondary
                                    type="warning"
                                    size="small"
                                    circle
                                    @click="
                                        itemPage?.showEditModal('编辑', {
                                            builtIn: row.builtIn,
                                            id: row.id,
                                            configKey: row.configKey
                                        })
                                    "
                                ></jb-btn>
                                <jb-btn
                                    v-if="!row.builtIn"
                                    tip-text="删除"
                                    :icon="Icons.DELETE"
                                    secondary
                                    size="small"
                                    type="error"
                                    circle
                                    class="mx-8px"
                                    confirm-text="确定删除这条数据？"
                                    :url="`/api/admin/globalConfig/deleteCustomConfig/${row.id}`"
                                    @success="itemPage?.loadData()"
                                ></jb-btn>
                            </template>
                        </jb-column>
                    </vxe-table>
                </pane>
            </splitpanes>
        </template>
    </jb-crud-page>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { VxeTableDefines } from 'vxe-table/types/table'
import { Icons } from '@/constants'
import { useResetableData } from '@/hooks/common/use-resetable-data'
import JbCrudPage from '@/components/_builtin/jb-crud-page/index.vue'
import TypeEdit from './components/type-edit/index.vue'
import ItemEdit from './components/item-edit/index.vue'

const typePage = ref<InstanceType<typeof JbCrudPage> | null>(null)

const itemPage = ref<InstanceType<typeof JbCrudPage> | null>(null)
const itemPageConditions = useResetableData({
    keywords: '',
    builtIn: '',
    typeId: ''
})
function cellClickEvent({ row }: VxeTableDefines.CellClickEventParams<any>): void {
    itemPageConditions.typeId = row.id
    itemPage.value?.loadData()
}

function onItemChange(oriData: any, newData: any) {
    oriData.configValue = newData.configValue
}
</script>

<style scoped></style>
